window.addEventListener("load", function () {
    // 模拟服务器上的传递过来的数据
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ]
    console.log(apiTypeData);
    let html = ""
    apiTypeData.forEach(function (v, i) {
        if (i === 0) {
            html += `<li class="on" title=${v.keyword}><a href="#">${v.name}</a></li>`
        } else if (v.isnew) {
            html += `<li class="bold" title=${v.keyword}><a href="#">${v.name}</a></li>`
        } else {
            html += `<li title=${v.keyword}><a href="#">${v.name}</a></li>`
        }
    });
    $(".textTop .list").innerHTML = html;

    $(".textTop .list li").forEach(function (v) {
        v.addEventListener("click", function () {
            // 排他，清除其他激活li
            $(".textTop .list li").forEach(function (item) {
                item.classList.remove("on");
            });
            // 给被点击对象添加激活样式
            this.classList.add("on");
            // 点击API区域的标签，联动下方搜索框
            // 将this的textContent赋值给span
            $(".inp span").textContent = this.textContent;
            // 将this的title赋值给搜索框的value
            $(".inp input").placeholder = this.title;
        });
    });

    //API列表部分
    //API列表区域 模拟服务器返回的数据
    let listDataArr = [
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南1", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南2", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南3", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南4", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    ]
    let Html = ""
    listDataArr.forEach(function (v) {
        // 遍历时拼接为html结构
        Html += `
        <li class="rel">
            
            <img src="../imgs/${v.img}" alt="图片已损坏">
            <p class="fz-12">${v.name}</p>
            <p class="fz-12 ${v.isSpecial ? "fc-red" : "fc-green"}">${v.price}</p>
            ${v.isSpecial ? '<span class="abs">企业专用</span>' : ""}
            <a class="abs" href="#">申请数据</a>
        </li>`;
    });
    // 放入指定位置
    $(".apiCards .list").innerHTML = Html;

    // 点击申请数据弹出蒙层
    // 获取相关节点
    // // 给公共样式绑定点击事件，事件委派
    $(".apiCards .list").addEventListener("click", function (e) {
        // 根据事件源的localName属性进行区分,a标签
        if (e.target.localName === "a") {
            $("#mask").style.display = "block";
            document.body.style.overflow = "hidden";
            e.preventDefault();//阻止默认跳转事件
        }
    });
    $("#mask").addEventListener("click", function () {
        this.style.display = "none";
        document.body.style.overflow = "auto";
    });

    $("#mask .box").addEventListener("click", function (e) {
        e.stopPropagation();
    });
    // 激活样式
    $(".maskText a").forEach(function (v) {
        v.addEventListener("click", function () {
            $(".maskText a").forEach(function (item) {
                item.classList.remove("on");
            });
            this.classList.add("on");
        });
    });

    // 默认显示第0个表单
    $(".box form")[0].style.display = "block";

    $(".maskText a").forEach(function (v, i) {
        v.addEventListener("click", function () {
            // 排他,移除a标签的激活样式
            $(".maskText a").forEach(function (item) {
                item.classList.remove("on");
            });
            // 给当前a标签添加激活样式
            this.classList.add("on");
            // 排他，移出所有显示form表单
            $(".box form").forEach(function (each) {
                each.style.display = "none";
            });
            // 显示对应的form表单
            $(".box form")[i].style.display = "block";
        });
    });

    console.log("a", $(".maskText a"));
    console.log("form", $(".box form"));

    // 分页激活样式
    $(".page .list li").forEach(function (v) {
        v.addEventListener("click", function () {
            // 排他，清除其他激活li
            $(".page .list li").forEach(function (item) {
                item.classList.remove("on");
            });
            // 给被点击对象添加激活样式
            this.classList.add("on");
        });
    });

    // 回到顶部
    window.onscroll = function () {
        if (scrollY > 200) {
            $("#BOX").style.display = `block`;
        } else {
            $("#BOX").style.display = `none`;
        }
    };
    $("#BOX").onclick = function () {
        let a = window.scrollY;
        let timer = setInterval(function () {
            a -= 10;
            window.scrollTo(0, a);
            if (a <= 0) {
                clearInterval(timer);

            }
        }, 1)
    }

});